<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骨架屏示例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            width: 100%;
            height: 100vh;
            /* background-color: #000;  */
        }

        /* 骨架#skeleton-screen屏样式 */
        #skeleton-screen {
            width: 100%;
            height: 100%;
        }

        #skeleton-screen img {
            width: 100%;
            height: 100%;
            /* object-fit: cover; */
            /* 确保图片覆盖整个容器 */
            /* //   display: none; */
        }
    </style>
</head>

<body>
    <!-- 骨架屏内容 -->
    <div id="skeleton-screen">
        <img src="./img/1.png">
        <img src="./img/2.png">
        <img src="./img/3.png">
        <img src="./img/4.png">
    </div>
    <script>
        const images = document.querySelectorAll('#skeleton-screen img');
        let currentIndex = 0;
        const screenWidth = window.innerWidth;

        function showImage(index) {
            images.forEach((img, i) => {
                img.style.display = i === index ? 'block' : 'none';
            });
        }

        showImage(currentIndex);

        document.addEventListener('click', function (event) {
            const clickX = event.clientX;
            if (clickX < screenWidth / 2) {
                // 点击左半部分，切换到上一页
                currentIndex = (currentIndex - 1 + images.length) % images.length;
            } else {
                // 点击右半部分，切换到下一页
                currentIndex = (currentIndex + 1) % images.length;
            }
            showImage(currentIndex);
        });

        // 监听键盘事件
        document.addEventListener('keydown', function (event) {
            if (event.key === 'Enter' || event.key === 'ArrowUp' || event.key === 'ArrowRight') {
                // 点击回车键、上方向键、右方向键，切换到下一页
                currentIndex = (currentIndex + 1) % images.length;
            } else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
                // 点击左方向键、下方向键，切换到上一页
                currentIndex = (currentIndex - 1 + images.length) % images.length;
            }
            showImage(currentIndex);
        });

        // 隐藏滚动条
        document.body.style.overflow = 'hidden';
    </script>
</body>

</html>